<style>
    .top-panel {border:1px solid #eceff9;border-radius:5px;text-align:center;}
    .top-panel > .layui-card-body {height:60px;}
    .top-panel-number {line-height:60px;font-size:30px;border-right:1px solid #eceff9;}
    .top-panel-tips {line-height:60px;font-size:30px}
    .welcome .layui-card {border:1px solid #f2f2f2;border-radius:5px;}
    .welcome .icon {margin-right:10px;color:#1aa094;}
    .welcome .icon-cray {color:#ffb800 !important;}
    .welcome .icon-blue {color:#1e9fff !important;}
    .welcome .icon-tip {color:#ff5722 !important;}
    .welcome .layuimini-qiuck-module {text-align:center;margin-top:10px}
    .welcome .layuimini-qiuck-module a i {display:inline-block;width:100%;height:60px;line-height:60px;text-align:center;border-radius:2px;font-size:30px;background-color:#F8F8F8;color:#333;transition:all .3s;-webkit-transition:all .3s;}
    .welcome .layuimini-qiuck-module a cite {position:relative;top:2px;display:block;color:#666;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-size:14px;}
    .welcome .welcome-module {width:100%;height:210px;}
    .welcome .panel {background-color:#fff;border:1px solid transparent;border-radius:3px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.05);box-shadow:0 1px 1px rgba(0,0,0,.05)}
    .welcome .panel-body {padding:10px}
    .welcome .panel-title {margin-top:0;margin-bottom:0;font-size:12px;color:inherit}
    .welcome .label {display:inline;padding:.2em .6em .3em;font-size:75%;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em;margin-top:.3em;}
    .welcome .layui-red {color:red}
    .welcome .main_btn > p {height:40px;}
    .welcome .layui-bg-number {background-color:#F8F8F8;}
    .welcome .layuimini-notice:hover {background:#f6f6f6;}
    .welcome .layuimini-notice {padding:7px 16px;clear:both;font-size:12px !important;cursor:pointer;position:relative;transition:background 0.2s ease-in-out;}
    .welcome .layuimini-notice-title,.layuimini-notice-label {padding-right:70px !important;text-overflow:ellipsis !important;overflow:hidden !important;white-space:nowrap !important;}
    .welcome .layuimini-notice-title {line-height:28px;font-size:14px;}
    .welcome .layuimini-notice-extra {position:absolute;top:50%;margin-top:-8px;right:16px;display:inline-block;height:16px;color:#999;}
    .welcome .more {padding:7px 16px;clear:both;font-size:14px !important;cursor:pointer;position:relative;transition:background 0.2s ease-in-out;}
    .welcome .more-tip {position:absolute;top:50%;margin-top:-8px;right:16px;display:inline-block;height:20px;color:#1aa094;}
</style>
<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main welcome">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md8">
                <div class="layui-row layui-col-space15" >

                    <div class="layui-col-xs12 layui-col-md4">
                        <div class="layui-card top-panel">
                            <div class="layui-card-header">访问量</div>
                            <div class="layui-card-body">
                                <div class="layui-row layui-col-space5">
                                    <div id="views" class="layui-col-xs9 layui-col-md9 top-panel-number">
                                        9,054,056
                                    </div>
                                    <div class="layui-col-xs3 layui-col-md3 top-panel-tips">
                                        <i class="fa fa-eye" style="color: #2F4056"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs12 layui-col-md4">

                        <div class="layui-card top-panel">
                            <div class="layui-card-header">家庭总数</div>
                            <div class="layui-card-body">
                                <div class="layui-row layui-col-space5">
                                    <div id="familyCount" class="layui-col-xs9 layui-col-md9 top-panel-number">
                                        9,054,056
                                    </div>
                                    <div class="layui-col-xs3 layui-col-md3 top-panel-tips">
                                        <i class="fa fa-home" style="color: #2F4056"></i>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="layui-col-xs12 layui-col-md4">

                        <div class="layui-card top-panel">
                            <div class="layui-card-header">用户总数</div>
                            <div class="layui-card-body">
                                <div class="layui-row layui-col-space5">
                                    <div id="userCount" class="layui-col-xs9 layui-col-md9 top-panel-number">
                                        9,054,056
                                    </div>
                                    <div class="layui-col-xs3 layui-col-md3 top-panel-tips">
                                        <i class="fa fa-user" style="color: #2F4056"></i>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="layui-col-md12">
                        <div class="layui-card">
                            <div id="email-top" class="layui-card-header"> </div>
                            <div id="email" class="layui-card-body"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-col-md4">
                <div class="layui-card">
                    <div class="layui-card-header"><i class="fa fa-bullhorn icon icon-tip"></i>系统公告</div>
                    <div class="layui-card-body layui-text" id="system-notice">
                    </div>
                </div>

                <div class="layui-card">
                    <div class="layui-card-header"><i class="fa fa-home icon"></i>网站简介</div>
                    <div class="layui-card-body layui-text layadmin-text" id="introduction">
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
<script>
    layui.use(['layer'], function () {
        var $ = layui.jquery,
            layer = layui.layer;

        //获得系统公告
        axios({
            url: 'notice/systemNotice',
            method: 'get'
        }).then(response => {
            let data = response.data;
            if (response.code == 0){
                data.forEach(elem => {
                    console.log(elem)
                    let option  = `<div class="layuimini-notice">
                                        <div class="layuimini-notice-title">${elem.title}</div>
                                        <div class="layuimini-notice-extra">${elem.createDate}</div>
                                        <div class="layuimini-notice-content layui-hide">
                                            ${elem.contend}
                                        </div>
                                    </div>`;
                    let optionObj = $(option);
                    $("#system-notice").append(optionObj);
                })

            }else{
                layer.msg(response.msg)
            }
        }).catch(error => {
            console.log(error)
        })


        //获得网站信息
        axios({
            url: 'web/info',
            method: 'get'
        }).then(response => {
            let data = response.data;
            console.log(data);
            if (response.code == 0){
               $("#views").text(data.views);
               $("#familyCount").text(data.familyCount);
               $("#userCount").text(data.userCount);
               let option  = `<p>${data.introduction}</p>`;
               let optionObj = $(option);
               $("#introduction").append(optionObj);
           }else{
               layer.msg(response.msg);
           }
        }).catch(error => {
            layer.msg(error);
        })

        //获得最近的邮件反馈
        axios({
            method: 'get',
            url: 'web/recentEmail'
        }).then(response => {
            if (response.code == 0){
                let data = response.data;
                if (response.count > 0){
                    let option = `<span>
                                    <i class="fa fa-envelope-o icon"></i>反馈信息
                                    <span class="layui-badge-dot"></span>
                                   </span>`;
                    let optionObj = $(option);
                    $("#email-top").append(optionObj);
                } else{
                    let option = `<span><i class="fa fa-envelope-o icon"></i>反馈信息</span>`;
                    let optionObj = $(option);
                    $("#email-top").append(optionObj);
                }
                data.forEach(elem => {
                    let option = `<div class="layuimini-notice">
                                    <div class="layuimini-notice-title">${elem.title}</div>
                                    <div class="layuimini-notice-extra">${elem.createDate}</div>
                                    <div class="layuimini-notice-content layui-hide">
                                        ${elem.content}
                                    </div>
                                </div>`;
                    let optionObj = $(option);
                    $("#email").append(optionObj);
                })
                let option = `<div class="more">
                                    <div class="more-tip"><a href="javascript:;" layuimini-content-href="email.html" style="color: #2F4056"><i class="fa fa-angle-double-right"></i> 更多</a></div>
                              </div>`;
                let optionObj = $(option);
                $("#email").append(optionObj);
            }else{
                layer.msg(response.msg);
            }
        }).catch(error => {
            console.log(error)
        })

        /**
         * 查看公告信息
         **/
        $('body').on('click', '.layuimini-notice', function () {
            var name = $(this).parent().prev().text(),
                title = $(this).children('.layuimini-notice-title').text(),
                noticeTime = $(this).children('.layuimini-notice-extra').text(),
                content = $(this).children('.layuimini-notice-content').html();

            var html = '<div style="padding:15px 20px; text-align:justify; line-height: 22px;border-bottom:1px solid #e2e2e2;background-color: #2f4056;color: #ffffff">\n' +
                            '<div style="text-align: center;margin-bottom: 20px;font-weight: bold;border-bottom:1px solid #718fb5;padding-bottom: 5px"><h4 class="text-danger">' + title + '</h4></div>\n' +
                            '<div style="font-size: 12px">' + content + '</div>\n' +
                        '</div>\n';
            parent.layer.open({
                type: 1,
                title: name + '<span style="float: right;right: 1px;font-size: 12px;color: #b1b3b9;margin-top: 1px">' + noticeTime + '</span>',
                area: '300px;',
                shade: 0.8,
                id: 'layuimini-notice',
                btn: ['确定'],
                btnAlign: 'c',
                moveType: 1,
                content: html
            });
        });
    });
</script>
